<template>
  <v-main>
    <v-app-bar
        flat
        fixed
        align="center"
        height="60px"
        color="white"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="12" class="px-0">
            <v-chip color="grey lighten-2" class="full-width" :to="'/search?keyword='+keyword">
              <v-icon size="20" color="grey lighten-1">mdi-magnify</v-icon>
              &nbsp;<span class="text--lighten-1">{{ keyword || '搜索感兴趣的内容' }}</span>
            </v-chip>
          </v-col>
        </v-row>
      </v-container>


    </v-app-bar>
    <v-container class="pt-15">
      <v-tabs
          v-model="tabModel"
          center-active
          color="secondary"
      >
        <v-tab key="0">
          产品
        </v-tab>
        <v-tab key="1">
          文章
        </v-tab>

      </v-tabs>
      <v-tabs-items v-model="tabModel">
        <!--        产品-->
        <v-tab-item key="0">
          <v-list three-line>
            <v-list-item v-for="(li,index) in productions" :key="index" :to="`/production/${li.pid}`">
              <v-list-item-avatar rounded size="70">
                <v-img v-if="getImgPath(li.pictureList[0])" :src="getImgPath(li.pictureList[0])"></v-img>
                <v-img v-else src="@/assets/index-logo.png"></v-img>
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title>{{ li.title }}</v-list-item-title>
                <v-list-item-subtitle>
                  <div>
                  {{ li.brandName }} {{li.favouriteCount}}次收藏
                  </div>
                  <v-rating
                      class="d-inline"
                      readonly
                      background-color="yellow accent-4"
                      color="yellow accent-4"
                      dense
                      half-increments
                      hover
                      :value="parseFloat(li.avgScore)"
                      size="15">
                  </v-rating>
                  <div class="text-caption d-inline ml-2 mt-1">{{parseFloat(li.avgScore)}}</div>
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list>
          <v-card-subtitle v-if="!(productions.length||loadingProductions)" class="text-center">找不到相关内容</v-card-subtitle>
          <load-more v-if="hasMoreProductions" :loading="loadingProductions" @onLoadMore="getProductions()"></load-more>
        </v-tab-item>
        <!--        文章-->
        <v-tab-item key="1">
          <v-list three-line>
            <v-list-item v-for="(li,index) in articles" :key="index" :to="`/article/${li.aid}`">
              <v-list-item-avatar rounded size="70">
                <v-avatar color="secondary" rounded size="70"><span class="white--text text-h5">{{ li.title }}</span>
                </v-avatar>
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title>{{ li.title }}</v-list-item-title>
                <v-list-item-subtitle>{{li.approveCount}}个点赞 {{li.favouriteCount}}次收藏</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list>
          <v-card-subtitle v-if="!(articles.length||loadingArticles)" class="text-center">找不到相关内容</v-card-subtitle>
          <load-more v-if="hasMoreArticles" :loading="loadingArticles" @onLoadMore="getArticles()"></load-more>
        </v-tab-item>
        <!--        话题-->
        <!--        <v-tab-item key="2">-->
        <!--          <v-list three-line>-->
        <!--            <v-list-item v-for="(li,index) in searchResult[2].list" :key="index">-->
        <!--              <v-list-item-avatar rounded size="70">-->
        <!--                <v-avatar color="secondary" rounded size="70"><span class="white&#45;&#45;text text-h5">{{ li.title }}</span>-->
        <!--                </v-avatar>-->
        <!--              </v-list-item-avatar>-->
        <!--              <v-list-item-content>-->
        <!--                <v-list-item-title>{{ li.title }}</v-list-item-title>-->
        <!--                <v-list-item-subtitle>{{ li.subtitle }}</v-list-item-subtitle>-->
        <!--              </v-list-item-content>-->
        <!--            </v-list-item>-->
        <!--          </v-list>-->
        <!--        </v-tab-item>-->


      </v-tabs-items>
    </v-container>
  </v-main>
</template>

<script>
import {baseUrl, imgPrefixUrl} from "../myConfig";
import LoadMore from "../components/LoadMore";
import {printMsg} from "../util/util";

export default {
  name: "Discover",
  components: {LoadMore},
  data: () => ({
    tabModel: 0,

    productions: [],
    articles: [],

    loadingProductions: false,
    loadingArticles: false,
    hasMoreProductions: false,
    hasMoreArticles: false,

    tags: [],

    keyword: '',
    histories: [],
    hotSearchTags: [],
    articlePage: {
      page: 0,
      row: 5
    },
    productionPage: {
      page: 0,
      row: 5
    }
  }),
  methods: {
    getImgPath(avatar) {
      if (avatar) {
        return baseUrl + imgPrefixUrl + avatar
      } else {
        return ''
      }
    },
    getProductionsAndArticles(data) {
      this.$http.post('content/search', data).then(res => {
        let productions = res.data.productions
        let articles = res.data.articles
        if (productions) {
          this.productions = productions.data || []
          this.hasMoreProductions = !this.productions.length === productions.total
          this.loadingProductions = false
        }
        if (articles) {
          this.articles = articles.data || []
          this.hasMoreArticles = !this.articles.length === articles.total
          this.loadingArticles = false
        }
      }).catch(res => {
        this.$emit("toast", res.msg)
        this.loading = false
      })
    },
    getProductions() {
      this.loadingProductions = true
      this.getProductionsAndArticles({
        keyword: this.keyword,
        mode: "production",
        page: 1,
        row:(this.productionPage.page+=1)*this.productionPage.row
      })
    },
    getArticles() {
      this.loadingArticles = true
      this.getProductionsAndArticles({
        keyword: this.keyword,
        mode: "article",
        page: 1,
        row:(this.articlePage.page+=1)*this.articlePage.row
      })
    }
  },
  beforeMount() {
    // 从query中获得关键词 并发起搜索
    if (this.$route.query.keyword) {
      this.keyword = this.$route.query.keyword
    }

    this.loadingProductions = true
    this.loadingArticles = true
    this.getProductionsAndArticles({
      keyword: this.keyword,
      mode: "all",
      page: 1,
      row: 5
    })
  }
}
</script>

<style scoped>

</style>
